<template>
  <div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1878.31 16.16"
      class="svg-top"
    >
      <path
        class="cls-1"
        id="path-l"
        d="M0,1.89,702.47,1.5c21,0,15,14.16,32.91,14.16h77.5A18.06,18.06,0,0,0,830.31,3.52"
      />
      <path
        class="cls-1"
        id="path-r"
        d="M1878.31.89,1175.84.5c-21,0-15,14.16-32.91,14.16h-77.51A18.06,18.06,0,0,1,1048,2.52"
      />
    </svg>
    <div class="now-time digital">{{ time }}</div>
    <topLeft ref="topLeft" />
    <topCenter ref="topCenter" />
    <topRight ref="topRight" />
  </div>
</template>
<script>
import topLeft from './topLeft'
import topCenter from './topCenter'
import topRight from './topRight'
import store from '@/store'
export default {
  name: 'top',
  data() {
    return {
      time: ''
    }
  },
  mounted() {
    this.init()
    /* setInterval(() => {
      this.time = this.getTime()
      store.commit('setCurrentDate', this.time)
    }, 1000) */
  },
  methods: {
    init() {
      let tl = new TimelineMax()
      let tw1 = TweenMax.set('.svg-top', { opacity: 1 })
      let tw2 = TweenMax.from('#path-l', 1.5, {
        drawSVG: '100% 100%',
        ease: Power4.easeInOut
      })
      let tw3 = TweenMax.from('#path-r', 1.5, {
        drawSVG: '100% 100%',
        ease: Power4.easeInOut
      })
      let tw4 = TweenMax.to('.now-time', 0.5, {
        opacity: 1,
        ease: Power3.easeInOut
      })
      tl.add(tw1)
        .add(tw2, 0.2)
        .add(tw3, 0.2)
        .add(tw4, 1)
        .add(this.$refs.topCenter.init(), 0.5)
        .add(this.$refs.topRight.init(), 0.3)
        .add(this.$refs.topLeft.init(), 0.3)
      return tl
    },
    getTime() {
      var date = new Date()
      var seperator1 = '-'
      var seperator2 = ':'
      var month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var second =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        ' ' +
        hour +
        seperator2 +
        minutes +
        seperator2 +
        second
      return currentdate
    }
  },
  components: { topCenter, topRight, topLeft }
}
</script>
<style lang="scss" scoped>
.svg-top {
  width: 1878.31px;
  height: 16.16px;
  position: absolute;
  top: 11px;
  opacity: 0;
  left: 20px;
}
.cls-1 {
  fill: none;
  stroke: #035ef0;
  stroke-miterlimit: 10;
  fill-rule: evenodd;
}
.now-time {
  position: absolute;
  width: 215px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #cccccc;
  font-size: 18px;
  letter-spacing: 1.5px;
  opacity: 0;
}
</style>
